<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title>输入你此刻的心情吧</title>
		<link rel="stylesheet" href="css/weui.min.css">
		<script src="js/main.js"></script>
		<style type="text/css">
			.weui-uploader__file img {
				width: 100%;
				height: 100%;
			}
			
			.mt0 {
				margin-top: 0;
			}
			
			.header_nav {
				background-color: #373b3e;
			}
			
			.back {
				width: 30px;
				height: 25px;
			}
			
			.lh {
				line-height: 1;
			}
			
			.js_dialog {
				display: none;
			}
		</style>
	</head>

	<body>
		<div class="container">
			<div class="weui-cells mt0 header_nav">
				<div class="weui-cell">
					<div class="weui-cell__hd">
						<div class="back">
							<img src="images/left.png" alt="">
						</div>
					</div>
					<div class="weui-cell__bd"></div>
					<div class="weui-cell__ft lh">
						<a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" id="submit">发送</a>
					</div>
				</div>
			</div>
			<div class="weui-cells weui-cells_form mt0">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<textarea class="weui-textarea" placeholder="请输入文本(不能输入表情)" rows="3"></textarea>
					</div>
				</div>
			</div>
			<div class="weui-cells weui-cells_form mt0">
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<div class="weui-uploader">
							<div class="weui-uploader__bd">
								<ul class="weui-uploader__files" id="uploaderFiles">
								</ul>
								<div class="weui-uploader__input-box">
									<input id="uploaderInput" class="weui-uploader__input file" type="file" accept="image/*">
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="js_dialog" id="iosDialog">
				<div class="weui-mask"></div>
				<div class="weui-dialog">
					<div class="weui-dialog__hd"><strong class="weui-dialog__title">提示</strong></div>
					<div class="weui-dialog__bd">是否删除该图片?</div>
					<div class="weui-dialog__ft">
						<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_default cancal">取消</a>
						<a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary delete">删除</a>
					</div>
				</div>
			</div>

			<div id="toast" style="display: none;">
				<div class="weui-mask_transparent"></div>
				<div class="weui-toast">
					<i class="weui-icon-success-no-circle weui-icon_toast"></i>
					<p class="weui-toast__content">已完成</p>
				</div>
			</div>

		</div>

	</body>
	<script type="text/javascript" src='http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js'></script>
	<script src="js/Url.js"></script>
	<script type="text/javascript">
		$(function() {
			$('.back').on('click', function() {
				window.history.go(-1);
			})

			var delParent;
			var defaults = {
				fileType: ["jpg", "png", "bmp", "jpeg", "JPG", "PNG", "JPEG", "GIF"], //上传文件的类型
				fileSize: 1024 * 1024 * 5 // 上传文件的大小 10M
			};

			$('.file').change(function() {
				var idFile = $(this).attr("id");
				var file = document.getElementById(idFile);
				var imgContainer = $(this).parents(".weui-uploader__bd"); //存放图片的父元素
				var fileList = file.files; //获取的图片文件
				console.log(fileList + "======filelist=====");
				var input = $(this).parent(); //文本框的父元素
				// var numUp = imgContainer.find(".weui-uploader__file").length;
				var numUp = $('#uploaderFiles').find('li').length;
				$('#num').text(numUp);
				// console.log(numUp);
				var totalNum = numUp + fileList.length; //总的数量
				if(fileList.length > 3 || totalNum > 3) {
					alert("上传图片不可以超过3个，请重新选择"); //一次选择上传超过3个 或者是已经上传和这次上传的到的总数也不可以超过3个
				} else if(numUp < 3) {
					fileList = validateUp(fileList);
					// console.log(fileList[0]);

					var reader = new FileReader();
					reader.readAsDataURL(fileList[0]);
					reader.onload = function(e) {
						// console.log(e.target.result);
						var str = $('<li class="weui-uploader__file"><img src="' + e.target.result + '" alt=""></li>').on('click', function() {
							// alert($(this));
							$(".js_dialog").show();
							delParent = $(this);
							console.log(delParent);
						});
						$('#uploaderFiles').append(str);

					}
				}

				// numUp = imgContainer.find(".weui-uploader__file").length;
				console.log(numUp);
				if(numUp >= 2) {
					$(this).parent().hide();
				}

			})

			$(".delete").click(function() {

				$(".js_dialog").hide();
				var numUp = delParent.siblings().length;
				console.log(numUp);
				if(numUp < 3) {
					$(".weui-uploader__input-box").show();
				}
				delParent.remove();

			});

			$(".cancal").click(function() {
				$(".js_dialog").hide();
			});

			//	var baseUrl = 'http://192.168.0.129:8080'
			$("#submit").click(function() {
				var leng = $('.weui-uploader__file').length;
				var text = $('.weui-textarea').val();
				var arr = new Array();
				console.log(arr);
				// var arr = [];
				for(var i = 0; i < leng; i++) {
					var str = $('.weui-uploader__file img')[i].src;
					arrImg = str.split(",").join("[douhao]");

					arr.push(arrImg);
				}

				// alert(text);
				// console.log(arr);
				if(text == '') {
					alert('填写内容不能为空！');
					return false;
				} else if(leng == 0) {
					alert('请选择图片');
					return false;
				} else {
					$.ajax({
						type: "PUT",
						url: baseUrl + "foot/user/saveUserMood",
						data: {
							'headImg': arr,
							'conntent': text
						},
						success: function(res) {
							console.log(res);
							var $toast = $('#toast');
							if($toast.css('display') != 'none') return;

							$toast.fadeIn(100);
							setTimeout(function() {
								$toast.fadeOut(100);
							}, 2000);
							 window.location.href="/personalPage.html";
						}
					})
				}

			})

			function validateUp(files) {
				var arrFiles = []; //替换的文件数组
				for(var i = 0, file; file = files[i]; i++) {
					//获取文件上传的后缀名
					var newStr = file.name.split("").reverse().join("");
					if(newStr.split(".")[0] != null) {
						var type = newStr.split(".")[0].split("").reverse().join("");
						console.log(type + "===type===");
						if(jQuery.inArray(type, defaults.fileType) > -1) {
							// 类型符合，可以上传
							if(file.size >= defaults.fileSize) {
								alert(file.size);
								alert('您这个"' + file.name + '"文件大小过大');
							} else {
								// 在这里需要判断当前所有文件中
								arrFiles.push(file);
							}
						} else {
							alert('您这个"' + file.name + '"上传类型不符合');
						}
					} else {
						alert('您这个"' + file.name + '"没有类型, 无法识别');
					}
				}
				return arrFiles;
			}

		})
	</script>

</html>